<template>
	<view class="tools br-2">
		<view class="tool-bg bg-blue" :class="theme+'-bg-abox'"></view>
		<!-- @click.stop="go(navList.link)" -->
		<view class="tool-header">
			<view class="icon">
				<image src="../../../static/images/icons/demo.png"></image>
			</view>
			<view class="icon">
				<!-- <image src="../static/images/icons/more.png"></image> -->
				<checkbox :checked="item.isCheckd" v-if="isCheckdShow" color="#000000" />
			</view>
		</view>
		<view class="tool-body">
			<view class="tool-title">{{locale == 'en' ? item.english : item.title}}</view>
		</view>
		<view class="tool-footer">
			<!-- <view>0 个收藏</view> -->
		</view>
	</view>

</template>

<script>
	export default {
		name: "tools",
		props: ["item", "isCheckdShow"],
		data() {
			return {
				
			}
		},
	}
</script>

<style lang="scss">
	.toolBox {
		display: flex;
		flex-wrap: wrap;
	}

	.tools {
		position: relative;
		width: 330rpx;
		overflow: hidden;

		.tool-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.tool-header,
		.tool-body,
		.tool-footer {
			position: relative;
			z-index: 1;
			color: white;
		}

		.tool-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx;

			.icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.tool-body {
			padding: 24rpx 24rpx 0;

			.tool-title {
				font-size: 30rpx;
			}
		}

		.tool-footer {
			padding: 0 24rpx 24rpx;
			font-size: 24rpx;
			color: rgba($color: #fff, $alpha: .6);
		}
	}
</style>
